<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hello_react</title>
    <style>
      .title {
        width: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="test"></div>

    <!-- 引入 react 核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于 react 操作 DOM -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入 babel，将 jsx 转为 js -->
    <script src="../js/babel.min.js"></script>

    <!-- 此处使用 jsx，并通过 babel 转为 js -->
    <script type="text/babel">
      const id = 'atguigu'
      const con = 'hello_react'
      // 虚拟 DOM，注意：此处不见引号，因为是 jsx 环境中
      const VDOM = (
        <div>
          <h1 className="title">
            <span id={id} style={{ 'font-size': '20px' }}>
              {con}
            </span>
          </h1>
          <h2>我是一段文本</h2>
          <Good>123</Good>
        </div>
      )
      // ReactDOM 渲染虚拟 DOM，语法：ReactDOM(VDOM, 容器)
      // 注意：ReactDOM 只能存在一个
      ReactDOM.render(VDOM, document.getElementById('test'))

      // jsx语法规则：
      // 1. 定义虚拟 DOM 时，不要写引号
      // 2. 标签中混入 js 表达式时，使用单花括号，且单花括号外不加引号
      // 3. 类名引入不加花括号，为引号引入，且 class 写为 className
      // 4. 内联样式（style）引入时，使用双花括号，外层单花括号为表达式，内层单花括号为样式集（使用对象包裹），
      //    且样式名使用小驼峰
      // 5. 虚拟 DOM，只有一个根标签
      // 6. 标签必须闭合
      // 7. 小写标签转为 HTML 中同名标签，若为自创标签，浏览器识别为未知元素（能正常显示，但F12>console报错——warning）；
      //    大小标签识别为组件去渲染，若没有定义，则报错
    </script>
  </body>
</html>
